var $ = layui.jquery
var layer = layui.layer
var laytpl = layui.laytpl
var laydate = layui.laydate
var form = layui.form//用于渲染表单
var id =1;
$("#add1").click(add);//给添加按钮绑定监听事件
$("#selc").click(testSelect);//给查询按钮绑定监听事件
//添加功能弹出层
function add(){
	layer.open({
		type:1,
		content:$("#testb").html(),//弹出层的内容，这里也是采用模板的方式，也可以采用标签拼接的方式
		area:["500px","500px"],
		title:"添加信息",
		success:function(){
			// $("input[value='确定']").click(testAdd);//给弹出层的确定按钮绑定事件
			$("input[value='关闭']").click(testClose);//弹出层的关闭按钮绑定事件
			renderDate("birth");//渲染时间框
			form.render()//渲染整个表单，使表单中除了文本输入框之外的可以显示
			//这里采用的是给表单赋值的形式，目的是为了后面从表单中取出数据对象的时候数据完整
			$("input[name='id']").val(id++);
			testAdd()//调用添加的方法
		}
	});
}
function testAdd(){
	//采用form.on的形式，直接从表单中取出数据对象
	form.on('submit(add)',function(data){
		// console.log(data.field)
		var obj = data.field
		var hobby_val = '';//对多选框的单独处理
		 hobby_val += obj.hobby1?obj.hobby1+' ':'';
		 hobby_val += obj.hobby2?obj.hobby2+' ':'';
		 hobby_val += obj.hobby3?obj.hobby3+' ':'';
		obj.hobby_val  = hobby_val//将多选框选中的值，赋给数据对象
		// alert(obj.hobby_val)
		var temp = $("#tradd2").html();//获得模板
		var html = laytpl(temp).render(obj);//向模板中渲染数据对象
		$("#tbody").append(html);//追加到表格中
		// alert(html)
		// id++
		testClose();//添加后，弹出层关闭
	})
	
	
}
//删除的方法
function del(id){
	layer.confirm('是否删除此行？',function(index){
		$("#tr"+id).remove()//根据行号删除某一行
		layer.close(index);
	})
}

//修改时的数据回显
function upd(id){
	layer.open({//弹出层
		type:1,
		title:"修改",
		area:['500px','500px'],
		content:$("#testb").html(),//弹出层显示的模板
		success:function(){
			laydate.render({//渲染时间框
				elem:'#birth',//这里要指定元素，坑爹
				type:'date'	
			});
			//分别从原来表格中获取数据，封装成对象
			var obj ={
				id:id,name1:$("#tdb"+id).text(),birth:$("#tdc"+id).text(),
				sex:$("#tdd"+id).text(),addr2:$("#tdf"+id).text()
			}
			//将对象填充到弹出层的表单（模板）中
			form.val("testb",obj);
			//复选框的单独处理
			$.each($("#tde"+id).text().split(' '),function(i,n){
				$("input[type='checkbox'][value='"+n+"']").prop('checked',true)
			});
			//渲染整个表单，使各种框正常显示
			form.render();
			save(id);//保存弹出层的数据到表格中，这里的参数id要有，保证与修改前的id对应
			
		}
	});
}

function save(id){
	//仍然采用form.on的形式，直接从表单中取出数据对象
	form.on('submit(add)',function(data){
		// console.log(data.field)
		var obj = data.field
		var hobby_val = '';
		//复选框的单独处理
		 hobby_val += obj.hobby1?obj.hobby1+' ':'';
		 hobby_val += obj.hobby2?obj.hobby2+' ':'';
		 hobby_val += obj.hobby3?obj.hobby3+' ':'';
		 obj.hobby_val  = hobby_val
		 // alert(hobby_val1)
		 //将对象数据，保存到表格中原来的那一行
		 $("#tdb"+id).html(obj.name1)
		 $("#tdc"+id).html(obj.birth)
		 $("#tdd"+id).html(obj.sex)
		 // alert($("#tdd"+id).html())
		 $("#tde"+id).html(obj.hobby_val)
		 // alert($("#tde"+id).html())
		 $("#tdf"+id).html(obj.addr2)
		testClose();//保存完后，关闭弹出层
	})
}

function testSelect(){
	$('tbody tr').css('background','');//每次点击，先把所有的样式清除
	var tr2 = $("input[name='name']").val();//获取姓名输入框的内容
	var tr6 = $("select[name='addr']").val();//获取地址输入框的内容
	// alert(tr2)
	// alert(tr6)
	if(tr2==''&&tr6=='') return;//如果两个都为空，直接返回
	//否则，遍历表格中的每一行，
	$('tbody tr').each(function(index,domEle){
		var name = $(this).find('td:eq(1)').html();//获取表格中第二列的数据，即姓名
		var addr = $(this).find('td:eq(5)').html();//获取表格中第六列的数据，即地址
		var b1 = (tr2==''||name.indexOf(tr2)>-1);
		var b2 = (tr6==''||addr==tr6);
		//如果满足检索条件，则把对应的行的样式修改
		if(b1&&b2){
			$(this).css('background','red');
		}
	});
}

function testClose(){
	layer.close(layer.index);
}
//渲染日期
function renderDate(id){
	laydate.render({
		elem:"#"+id,
		type:"date",
		value:new Date()//在日期框中显示系统当前时间
		
	})
}


